<html>

<body>


    <!-- # css -->
    <link rel="stylesheet" href="https://unpkg.com/vue2-org-tree/dist/style.css" />

    <!-- # js -->
    <script src="../addons/ewei_shopv2/static/js/dist/vue/vue.min.js"></script>
    <script src="https://unpkg.com/vue2-org-tree/dist/index.js"></script>

    <!-- <form method="post">
        <input name="add" value="1">
        <button type="submit">添加</button>
    </form> -->

    <!-- <div class="page-header">
        当前位置：<span class="text-primary">关系图</span>
    </div> -->
    <div class="page-content" id="vue_app">
        <vue2-org-tree :data="data" collapsable @on-node-click="NodeClick" @on-expand="onExpand" :render-content="renderContent" />
    </div>

    <style>
        dd {
            margin: 0;
            list-style: none;
        }
    </style>
    <script>
        new Vue({
            el: '#vue_app',
            data: function() {
                return {
                    data: {php echo json_encode($list);}

                    // data: {
                    //     id: 0,
                    //     label: "XXX科技有限公司",
                    //     children: [
                    //         {
                    //             id: 2,
                    //             label: "产品研发部",
                    //             children: [
                    //                 {
                    //                     id: 5,
                    //                     label: "研发-前端"
                    //                 },
                    //                 {
                    //                     id: 6,
                    //                     label: "研发-后端"
                    //                 },
                    //                 {
                    //                     id: 9,
                    //                     label: "UI设计"
                    //                 },
                    //                 {
                    //                     id: 10,
                    //                     label: "产品经理"
                    //                 }
                    //             ]
                    //         },
                    //         {
                    //             id: 3,
                    //             label: "销售部",
                    //             children: [
                    //                 {
                    //                     id: 7,
                    //                     label: "销售一部"
                    //                 },
                    //                 {
                    //                     id: 8,
                    //                     label: "销售二部"
                    //                 }
                    //             ]
                    //         },
                    //         {
                    //             id: 4,
                    //             label: "财务部"
                    //         },
                    //         {
                    //             id: 9,
                    //             label: "HR人事"
                    //         }
                    //     ]
                    // }

                }
            },
            components: {
                // 将组建加入组建库
                // 'my-component': 'url:./component/my-component.vue'
            },
            created() {
                this.toggleExpand(this.data, true)
            },
            methods: {
                renderContent(createElement, data) {
                    console.log(data)
                    return createElement(
                        'span', {
                            style: {
                                width: "100%",
                                height: "100%",
                                display: "block",
                                // padding:"10px 15px",
                                borderRadius: "3px",
                                textAlign: "left"
                            }
                        },
                        [

                            createElement('dd', {}, [
                                createElement('img', {
                                    style: {
                                        width: "60px",
                                        height: "60px",
                                    },
                                    attrs: {
                                        src: data.avatar
                                    }
                                })
                            ]),
                            data.level_name&&createElement('dd',{style:{
fontSize:"10px"
                            }} ,"等级："+data.level_name),
                            data.id>0&&createElement('dd',{style:{
fontSize:"10px"
                            }} ,"id:"+data.id),
                            data.realname&&createElement('dd',{style:{
fontSize:"10px"
                            }} , "真名："+data.realname),
                            data.mobile&& createElement('dd',{style:{
fontSize:"10px"
                            }} , "电话："+data.mobile),
                            data.nickname&& createElement('dd',{style:{
fontSize:"10px"
                            }} , "昵称："+data.nickname),
                            
                            
                        ]
                    )
                },
                NodeClick(e,data){
                    top.location = '{php echo webUrl('relationship/diagram')}' +'&agentid='+ data.id;
                },
                collapse(list) {
                    var _this = this;
                    list.forEach(function(child) {
                        if (child.expand) {
                            child.expand = false;
                        }
                        child.children && _this.collapse(child.children);
                    });
                },
                onExpand(e, data) {
                    if ("expand" in data) {
                        data.expand = !data.expand;
                        if (!data.expand && data.children) {
                            this.collapse(data.children);
                        }
                    } else {
                        this.$set(data, "expand", true);
                    }
                },
                toggleExpand(data, val) {
                    var _this = this;
                    if (Array.isArray(data)) {
                        data.forEach(function(item) {
                            _this.$set(item, "expand", val);
                            if (item.children) {
                                _this.toggleExpand(item.children, val);
                            }
                        });
                    } else {
                        this.$set(data, "expand", val);
                        if (data.children) {
                            _this.toggleExpand(data.children, val);
                        }
                    }
                }
            }
        })
    </script>

</body>

</html>